<template>
  <view class="commontabs u-border-bottom">
    <view v-for="(item, idx) in options" :key="idx" class="commontabs-item" @click="changeTab(item.value)">
      <view class="commontabs-name" :class="activeTab === item.value ? 'activeTab' : ''">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  options: {
    type: Array as PropType<IOpiton[]>,
    default: () => [],
  },
  activeTab: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['update:activeTab', 'change'])
const tabVal = ref(1)
interface IOpiton {
  value: number
  name: string
}
watch(
  () => props.activeTab,
  () => {
    if (props.activeTab) tabVal.value = props.activeTab
  },
  { immediate: true, deep: true },
)

const changeTab = (val: number) => {
  tabVal.value = val
  emit('update:activeTab', val)
  emit('change', val)
}
</script>

<style scope lang="scss">
.commontabs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid;
  box-sizing: border-box;

  &-item {
    flex: 1;
    height: 47px;
    line-height: 47px;
    text-align: center;
  }

  &-name {
    display: inline-block;
    padding: 0 8px;
    cursor: pointer;
    color: #333;
  }

  .activeTab {
    position: relative;
    color: #376af6;

    &:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 3px;
      border-radius: 3px;
      bottom: -1px;
      left: 0;
      background-color: #376af6;
    }
  }
}
</style>
